<template>
	<view>
		<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
		<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="addr"></view>
			<view class="input-box">

			</view>
			<view class="icon-btn">
				<view class="none">

				</view>
				<view class="icon setting" @tap="toSetting"></view>
			</view>
		</view>
		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- 用户信息 -->
		<view class="user">
			<!-- 头像 -->
			<view class="left">
				<image v-if="user.head_url == null" src="/static/img/logo.png" @tap="toSetting"></image>
				<image v-else :src="user.head_url" @tap="toSetting">
				</image>

			</view>
			<!-- 昵称,个性签名 -->
			<view class="right" @tap="toSetting" v-if="islogin">
				<view class="username">{{user.name}}</view>
				<view class="signature">{{user.phone}}</view>
				<view class="signature">{{user.level_name}}</view>
			</view>
			<view class="right" v-else>
				<view class="username" @tap="toLogin">未登录</view>
				<view class="signature">点击前往登录</view>
			</view>

			<!-- 二维码按钮 -->
			<view class="erweima" @tap="toMyQR">
				<view class="icon qr"></view>
			</view>
		</view>
		<!-- VIP banner -->
		<!-- 	<view class="VIP">
			<view class="img">
				<image src="/static/img/VIP.png"></image>
			</view>
			<view class="title">开通VIP会员</view>
			<view class="tis">会员特权</view>
		</view> -->
		<!-- 订单-余额 -->
		<view class="order">
			<!-- 订单类型 -->
			<view class="title" @tap="toOrderList(0)">
				<view class="left">
					<uni-icons type="bars"></uni-icons> 我的订单
				</view>
				<view class="right">查看<uni-icons type="forward" color="#64748B"></uni-icons>
				</view>
			</view>
			<view class="list">
				<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(row.type)">
					<view class="img">
						<view class="icon" :class="row.icon"></view>
					</view>
					<text v-if="row.count>0"
						style="position: absolute;width: 20px;height: 20px;background-color: red;border-radius: 50%;top: 0;right: 7px;text-align: center;font-size: 11px;line-height: 20px;color: #fff;">{{row.count > 99 ? '99+':row.count}}</text>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
			<!-- 余额 -->
			<view class="balance-info">
				<view class="left">
					<view class="box" @tap="toPage('/pages/user/profit/detail/detail?title=余额明细&type=1')">
						<view class="num">{{user.balance_1 || 0.00}}</view>
						<view class="text">余额</view>
					</view>
					<view class="box" @tap="toPage('/pages/user/profit/detail/detail?title=YSB明细&type=3')">
						<view class="num">{{user.balance_3 || 0}}</view>
						<view class="text">YSB积分</view>
					</view>
					<view class="box" @tap="toPage('/pages/user/profit/detail/detail?title=BRJ明细&type=5')">
						<view class="num">{{user.balance_5 || 0}}</view>
						<view class="text">BRJ积分</view>
					</view>
					<view class="box">
						<view class="num">{{user.lockPoint || 0}}</view>
						<view class="text">锁仓积分</view>
					</view>
					<view class="box" @tap="toPage('/pages/user/profit/detail/detail?title=绿色积分明细&type=2')">
						<view class="num">{{user.balance_2 || 0.00}}</view>
						<view class="text">绿色积分</view>
					</view>
				</view>
				<!-- <view class="right">
					<view class="box" @tap="toDeposit">
						<view class="img">
							<view class="icon chongzhi"></view>
						</view>
						<view class="text">充值</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 工具栏 -->
		<view class="toolbar">
			<view class="title">常用工具</view>
			<view class="list">
				<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url,row.type)">
					<view class="img">
						<image :src="row.img"></image>
					</view>
					<view class="text">{{row.text}}</view>
					<text class="unread" v-if="row.type == 'chat' && unread > 0">{{unread}}</text>
				</view>
			</view>
			<view class="title">商家工具</view>
			<view class="list">
				<view class="box" v-for="(row,index) in shopList" :key="index" @tap="toPage(row.url,row.type)">
					<view class="img">
						<image :src="row.img"></image>
					</view>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
			<view class="textlist">

				<view class="list_item" @click="toPage('/pages/user/record/record')">
					<view class="left">
						<uni-icons type="settings" color="#64748B" size="20"></uni-icons>
						<text>余额明细</text>
					</view>
					<view class="right">

						<uni-icons type="forward" color="#64748B"></uni-icons>
					</view>
				</view>
				<view class="list_item" @click="toPage('/pages/user/profit/detail/detail?title=YSB明细&type=3')">
					<view class="left">
						<uni-icons type="wallet" color="#64748B" size="20"></uni-icons>
						<text>YSB明细</text>
					</view>
					<view class="right">

						<uni-icons type="forward" color="#64748B"></uni-icons>
					</view>
				</view>
				<view class="list_item"
					@click="toPage('/pages/user/profit/detail/detail?id=1&title=已激活绿色积分&leixing=1')">
					<view class="left">
						<uni-icons type="wallet" color="#64748B" size="20"></uni-icons>
						<text>已激活绿色积分</text>
					</view>
					<view class="right">

						<uni-icons type="forward" color="#64748B"></uni-icons>
					</view>
				</view>
				<view class="list_item" @click="toPage('/pages/user/withdrawal/withdrawal')">
					<view class="left">
						<uni-icons type="mail-open" color="#64748B" size="20"></uni-icons>
						<text>通证提现</text>
					</view>
					<view class="right">

						<uni-icons type="forward" color="#64748B"></uni-icons>
					</view>
				</view>
				<view class="list_item" @click="toPage('/pages/user/collection/collection')">
					<view class="left">
						<uni-icons type="heart" color="#64748B" size="20"></uni-icons>
						<text>我的关注</text>
					</view>
					<view class="right">

						<uni-icons type="forward" color="#64748B"></uni-icons>
					</view>
				</view>
				<view class="list_item" @click="toPage('/pages/user/footerlist/footerlist')">
					<view class="left">
						<uni-icons type="gift" color="#64748B" size="20"></uni-icons>
						<text>我的足迹</text>
					</view>
					<view class="right">

						<uni-icons type="forward" color="#64748B"></uni-icons>
					</view>
				</view>
				<view class="list_item" @click="toPage('/pages/user/address/address')">
					<view class="left">
						<uni-icons type="location" color="#64748B" size="20"></uni-icons>
						<text>收货地址</text>
					</view>
					<view class="right">

						<uni-icons type="forward" color="#64748B"></uni-icons>
					</view>
				</view>

			</view>
		</view>
		<view class="index_tips">

			<view class="name xieyi">
				<text class="serve">服务协议</text><text class="serve">隐私政策</text>
			</view>
			<view class="name">
				{{icp}}
			</view>
		</view>
		<!-- 占位 -->
		<view class="place-bottom"></view>
	</view>
</template>
<script>
	import {
		UserIndex
	} from "@/api/api.js"
	import {
		getToken
	} from "@/utils/auth.js"
	import {
		ConsumerApply
	} from "@/api/user.js"
	export default {
		data() {
			return {
				icp: '',
				isfirst: true,
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				//个人信息,
				user: {},
				islogin: false,
				// 订单类型
				orderList: [
					// {
					// 	text: '全部',
					// 	icon: "pingjia"
					// },
					{
						text: '待付款',
						icon: "fukuan",
						type: 1,
						count: 0
					},
					{
						text: '待发货',
						icon: "fahuo",
						type: 2,
						count: 0
					},
					{
						text: '待收货',
						icon: "shouhuo",
						type: 3,
						count: 0
					},

					{
						text: '已完成',
						icon: "tuihuo",
						type: 4,
						count: 0
					},
					{
						text: '退换货',
						icon: "pingjia",
						type: 5,
						count: 0
					}
				],
				// 工具栏列表
				mytoolbarList: [{
						url: '../../user/keep/keep',
						text: '我的团队',
						img: '/static/img/user/t15.png',
						type: ''
					},
					// {
					// 	url: '../../user/myshop/myshop',
					// 	text: '我的商家',
					// 	img: '/static/img/user/t10.png',
					// 	type: ''
					// },

					{
						url: '../../user/profit/profit',
						text: '我的收益',
						img: '/static/img/user/t17.png',
						type: ''
					},
					{
						url: '../../user/release/release',
						text: '释放明细',
						img: '/static/img/user/t8.png',
						type: ''
					},
					{
						url: '../../user/release/accelerate',
						text: '加速释放',
						img: '/static/img/user/t2.png',
						type: ''
					},
					{
						url: '../../user/statistics/statistics',
						text: '数据统计',
						img: '/static/img/user/t12.png',
						type: ''
					},

					// {
					// 	url: '../../user/operate/operate',
					// 	text: '运营中心申请',
					// 	img: '/static/img/user/t7.png',
					// 	type: ''
					// },
					{
						url: '../../user/about/about',
						text: '应用介绍',
						img: '/static/img/user/t4.png',
						type: ''
					},
					{
						text: '互转',
						img: '/static/img/user/t1.png',
						url: '../../user/transform/transform',
						type: ''
					},
					{
						text: '兑换',
						img: '/static/icon/dh.png',
						url: '../../user/exchange/exchange',
						type: ''
					},
					{
						text: '充值',
						img: '/static/icon/cz.png',
						url: '../../user/deposit/deposit',
						type: ''
					},
					{
						text: '数据交易所',
						img: '/static/icon/jy.png',
						url: '',
						type: ''
					},
					{
						text: '数字资产',
						img: '/static/icon/qb.png',
						url: '',
						type: ''
					},
					// {
					// 	text: '消费商申请',
					// 	img: '/static/img/user/t6.png',
					// 	url: 'none',
					// 	type: ''
					// },
					// {
					// 	text: '消费商打赏',
					// 	img: '/static/img/user/t13.png',
					// 	url: '../../user/reward/consumer/reward',
					// 	type: '3'
					// },
					{
						text: '客服',
						img: '/static/img/user/kefu.png',
						url: 'https://tb.53kf.com/code/client/b26bff254d39d477e66209bdabbbf6673/1',
						type: '99'
					},
					{
						text: '实名认证',
						img: '/static/img/user/t6.png',
						url: '/pages/user/userauth/index',
						type: ''
					},

					// {
					// 	url: '../../user/business/offline/offline',
					// 	text: '线下商家',
					// 	img: '/static/img/user/t2.png',
					// 	type: ''
					// },
					{
						url: '/pages/chat/index',
						text: '群聊',
						img: '/static/img/user/chat.png',
						type: 'chat',
					},

				],
				shopList: [
					// {
					// 	url: '../../user/reward/reward',
					// 	text: '商家打赏',
					// 	img: '/static/img/user/t11.png',
					// 	type: '1'
					// },
					// {
					// 	url: '../../user/ShopList/ShopList',
					// 	text: '区域商家',
					// 	img: '/static/img/user/t9.png',
					// 	type: '2'
					// },
					// {
					// 	url: '../../user/center/center?type=1',
					// 	text: '子运营中心',
					// 	img: '/static/img/user/t16.png',
					// 	type: '2'
					// },
					// {
					// 	url: '../../user/center/center?type=2',
					// 	text: '运营中心一览',
					// 	img: '/static/img/user/t7.png',
					// 	type: '2'
					// }
				],
				ShopbarList: [{
						url: '../../user/keep/keep',
						text: '商家打赏',
						img: '/static/img/user/point.png'
					},
					{
						url: '../../user/coupon/coupon',
						text: '区域商家',
						img: '/static/img/user/quan.png'
					},
					{
						url: '../../user/business/business',
						text: '子运营中心',
						img: '/static/img/user/renw.png'
					},
					{
						url: '../../user/profit/profit',
						text: '运营中心一览',
						img: '/static/img/user/momey.png'
					},
				],
				socketTask: null,
				unread: 0
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true

		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		onLoad() {
			this.statusHeight = 0;

		},
		onShow() {
			if (getToken() != '') {
				this.islogin = true //登录
				this.UserIndex()
			} else {
				this.islogin = false //未登录
				this.user = {}
				this.orderList[0].count = 0
				this.orderList[1].count = 0
				this.orderList[2].count = 0
				this.orderList[4].count = 0
				// uni.navigateTo({
				// 	url: '/pages/login/login'
				// })
			}
		},
		onUnload() {
			this.socketTask.close({

			})
		},
		methods: {
			connectWebSocket() {
				if (this.socketTask) {
					return true;
				}
				this.socketTask = uni.connectSocket({
					url: 'ws://8.210.163.98:9090',
					complete() {

					}
				})
				this.socketTask.onOpen(() => {
					console.log('链接成功');
					this.sendSocket('login', {
						type: "login",
						user_id: this.user.id,
						content: "登录"
					})
				})
				this.socketTask.onError(() => {
					console.log('链接失败');
				})
				this.socketTask.onMessage((data) => {
					console.log('message', JSON.parse(data.data));
					if (data.type == 'ping') {
						return
					}
					if (data.status == 1) {
						let content = data.content
						if (data.type == 'tips') {
							that.unread++
						}
					} else {
						uni.$showMsg(data.msg || '接收失败')
					}
				})
			},
			sendSocket(type, data = {}) {
				this.socketTask.send({
					data: JSON.stringify({
						type: type,
						data: data
					}),
					success(data) {

					},
					fail(err) {
						console.log('发送失败');
					}
				})
			},
			UserIndex() {
				UserIndex().then(res => {
					this.user = res.data.info
					this.orderList[0].count = res.data.order_count.type0
					this.orderList[1].count = res.data.order_count.type1
					this.orderList[2].count = res.data.order_count.type2
					this.orderList[4].count = res.data.order_count.type4
					this.icp = res.data.icp
					this.unread = res.data.unread
					//链接websocket
					this.connectWebSocket()
				}).catch(err => {
					console.log(err, this.socketTask);
					this.socketTask && this.socketTask.close()
				})
			},
			//消息列表
			toMsg() {
				uni.navigateTo({
					url: '../../msg/msg'
				})
			},
			toOrderList(index) {
				if (!this.islogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}

				uni.setStorageSync('tbIndex', index);
				uni.navigateTo({
					url: '../../user/order_list/order_list?tbIndex=' + index
				})
			},
			toSetting() {
				if (!this.islogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '../../user/setting/setting'
				})
			},
			toMyQR() {
				uni.navigateTo({
					url: '../../user/myQR/myQR'
				})
			},
			toLogin() {
				uni.showToast({
					title: '请登录',
					icon: "none"
				});
				uni.navigateTo({
					url: '../../login/login'
				})
				this.isfirst = false;
			},
			isLogin() {
				//实际应用中,用户登录状态应该用token等方法去维持登录状态.
				const value = uni.getStorageSync('UserInfo');
				if (value) {
					return true;
				}
				return false
			},
			toDeposit() {
				uni.navigateTo({
					url: '../../user/deposit/deposit'
				})
			},
			toPage(url, type = '') {

				if (url == '../../user/about/about') {
					uni.navigateTo({
						url: url
					})
					return
				}
				if (!this.islogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				if (type == '1') {
					if (this.user.is_shop != 1) { //不是商家身份
						uni.showToast({
							title: '需要商家身份才可以打赏',
							icon: "none"
						});
						return
					}
				} else if (type == '2') {
					if (this.user.is_shop != 1) { //不是商家身份
						uni.showToast({
							title: '您还不是商家',
							icon: "none"
						});
						return
					}
				} else if (type == '3') {
					if (this.user.is_consumer != 1) { //不是商家身份
						uni.showToast({
							title: '需要消费商身份才可以打赏',
							icon: "none"
						});
						return
					}
				} else if (type == '99') {
					//客服系统
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/kefu/index'
					})
					// #endif
					// #ifdef H5
					window.location.href = "https://tb.53kf.com/code/client/b26bff254d39d477e66209bdabbbf6673/1"
					// #endif

					return false
				}
				if (!url) {
					uni.showToast({
						title: '暂未开通',
						icon: "none"
					});
					return;
				} else if (url == 'none') {
					ConsumerApply().then(res => {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					})
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #0f172a;
		box-sizing: border-box;
	}

	.index_tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #777;
		font-size: 16px;
		padding-bottom: 10px;
		margin-top: 10px;

		.xieyi {
			display: flex;
			justify-content: center;

			.serve {
				padding: 0 10px;
				font-size: 14px;
				color: #568AB1;
				border-right: 1px solid #568AB1;
				font-weight: bold;
			}

			.serve:last-child {
				border: 0;
			}
		}

		.name {
			font-size: 12px;
			margin-top: 5px;
		}
	}

	.none {
		width: 32px;
	}

	.textlist {
		padding: 10px;

		.list_item {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			padding: 10px 0;

			.left {
				display: flex;
				align-items: center;
				color: #64748B;

				text {
					margin-right: 5px;
				}
			}

			.right {
				display: flex;
				align-items: center;
				color: #4e5b6c;
			}
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #0f172a;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */

	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #0f172a;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;

			.icon {
				color: #fff;
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}

	.place {
		background-color: #0f172a;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.place-bottom {
		height: 10upx;
	}

	.user {
		width: 92%;
		padding: 0 4%;
		display: flex;
		align-items: center;
		// position: relative;
		background-color: #0f172a;
		padding-bottom: 30upx;

		.left {
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border: solid 1upx #fff;
			border-radius: 100%;

			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}

		}

		.right {
			width: 100%;

			.username {
				font-size: 36upx;
				color: #fff;
			}

			.signature {
				color: #eee;
				font-size: 28upx;
			}
		}

		.erweima {
			flex-shrink: 0;
			width: 10vw;
			height: 10vw;
			margin-left: 5vw;
			border-radius: 100%;

			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to left, #fbbb37 0%, #fcf0d0 105%);

			.icon {
				color: #7b6335;
				font-size: 42upx;
			}
		}
	}

	.order {
		width: 84%;
		margin: 30upx 4% 30upx 4%;
		padding: 30upx 4% 20upx 4%;
		background-color: #1e293b;
		color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;

		.title {
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10px;

			.left,
			.right {
				display: flex;
				align-items: center;
			}

			.right {
				color: #777;
			}
		}

		.list {
			display: flex;
			border-bottom: solid 1upx #64748B;
			padding-bottom: 10upx;

			.box {
				width: 20%;
				position: relative;

				.img {
					width: 100%;
					display: flex;
					justify-content: center;

					.icon {
						font-size: 50upx;
						color: #64748B;
					}
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #64748B;
				}

			}
		}

		.balance-info {
			display: flex;
			padding: 10upx 0;

			.left {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				padding: 0 5px;

				.box {
					width: 50%;
					font-size: 13px;

					.num {
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						color: #fff;
						font-weight: bold;
						font-size: 14px;
					}

					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						color: #64748B;
						font-size: 28upx;
					}
				}
			}

			.right {
				border-left: solid 1upx #64748B;
				width: 25%;

				.box {

					.img {
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;

						.icon {
							font-size: 45upx;
							color: #fff;
						}
					}

					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 28upx;
						color: #64748B;
					}
				}
			}
		}
	}

	.VIP {
		width: 84%;
		margin: -65upx auto 20upx auto;
		padding: 30upx 4%;
		background: linear-gradient(to left, #dea96d 0%, #f6d59b 100%);
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.2);
		border-radius: 15upx;
		display: flex;
		align-items: center;

		.img {
			flex-shrink: 0;
			width: 60upx;
			height: 60upx;

			image {
				width: 60upx;
				height: 60upx;
			}
		}

		.title {
			width: 100%;
			color: #796335;
			font-size: 30upx;
		}

		.tis {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			color: #fcf0d0;
			font-size: 26upx;
		}
	}

	.toolbar {
		width: 92%;
		margin: 0 4% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #1e293b;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;

		.title {
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
			color: #fff;
			font-weight: bold;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.box {
				width: 25%;
				margin-bottom: 30upx;
				position: relative;

				.img {
					width: 23vw;
					height: 10.5vw;
					display: flex;
					justify-content: center;

					image {
						width: 10vw;
						height: 10vw;
					}
				}

				.unread {
					position: absolute;
					top: 0;
					right: 20px;
					background: #fff;
					z-index: 999;
					font-size: 12px;
					width: 15px;
					height: 15px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #fff;
				}
			}
		}
	}
</style>